<template>
	<view class="icon-box" @click="fnClick">
		
			<image
			v-if="url"
			:mode="mode"
			:style="[itemStyle]"
			class="i-img" :src="url"></image>
			<view
			v-else
			:style="[itemStyle]"
			class="i-img-no" ></view>
		
	</view>
</template>

<script>
	export default {
		props:{
			url:{},
			size:{
				type:Number,
				default:30
			},
			ratio:{
				default:'1/1'
			},
			mode:{},
			marigin:{},
			mariginLeft:{},
			mariginRight:{},
			mariginTop:{},
			mariginBottom:{}
		},
		computed:{
			itemStyle(){
				return{
					width:`${this.size*2}rpx`,height:`${this.size*2}rpx`,
					'marigin-left':this.mariginLeft?`${this.mariginLeft}px`:this.marigin?`${this.marigin}px`:0,
					'marigin-right':this.mariginRight?`${this.mariginRight}px`:this.marigin?`${this.marigin}px`:0,
					'marigin-top':this.mariginTop?`${this.mariginTop}px`:this.marigin?`${this.marigin}px`:0,
					'marigin-bottom':this.mariginBottom?`${this.mariginBottom}px`:this.marigin?`${this.marigin}px`:0
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			fnClick(e){
				this.$emit('click',e)
			}
		}
	}
</script>

<style lang="scss">
	.icon-box{
		width: fit-content;
		height: fit-content;
		display: flex;
		
		.i-img{
			will-change: transform;
		}
		.i-img-no{
			will-change: transform;
			background: #C0C0C0;
		}
	}
</style>
